﻿<section id="download-bootstrap">
    <div class="page-header">
        <h3>Bop DropDown Examples</h3>
    </div>

    <article>
        <h4 class="lead">DropDown Button</h4>
        <p>You can use following code to generate a DropDown Button element on you page as you can see in right hand side.</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/DropDownMenuCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/DropDownMenu.cshtml")
            </div>
        </div>
    </article>

    <article>
        <h4 class="lead">Binding DropDown Menu</h4>
        <p>You can use following code to bind a list of items to a DropDown Menu element. You are able to bind any list which is implementing IDropDownItemModel interface to a DropDown Menu</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/DropDownMenuBindingCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/DropDownMenuBinding.cshtml")
            </div>
        </div>
    </article>

    <article>
        <h4 class="lead">Sub Menu</h4>
        <p>Following code is showing how to add sub menu to a DropDown Menu. You can add sub menu to a sub menuas well</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/DropDownSubMenuCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/DropDownSubMenu.cshtml")
            </div>
        </div>
        <p>You can ask a menu to be a DropUp Menu by using DropUp method. Also, you can align menu to left or right by using AlignTo method. if you want to add a new attribute to your menu you can use Attr method. By using Position Method, you can control opening a submenu at the right side or left side. Disable() method deiables an Item and DisableSubMenu() disables a sub menu. To bind a client event to an item in a menu ClientEvents is avalable here as well an you can use it as the same you do for Button.</p>
        <p> For example:  
            <pre>
                ClientEvents(e => e.Add().Register(EventNames.OnClick, "clickMe();")); 
            </pre>
    </article>

     <article>
        <h4 class="lead">DropDown Button</h4>
        <p>You can use a Button as a trigger for a DropDown Menu. It is a combination of a Button and a DropDown Menu so all their methods are available here as well.</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/DropDownButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/DropDownButton.cshtml")
            </div>
        </div>
    </article>

 </section>

